<template>
    <div class='head'>
        <div class="head-left">
            <div class="left_top">
                个人中心
            </div>
            <div class="left_content">
                <div style="padding:19px 0px; border-bottom: 3px solid #4C6CFF;">
                    基本信息
                </div>
            </div>
            <div class="left_bottom">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 50px;">
                    <div>
                        <p style="width: 66px; text-align: right;">姓名:</p>
                    </div>
                    <div class="frame">{{user.u_name}}</div>
                    <div>
                        <p style="width: 66px; text-align: right;">性别:</p>
                    </div>
                    <div class="frame">{{user.sex}}</div>
                    <div>
                        <p style="width: 66px; text-align: right;">手机号:</p>
                    </div>
                    <div class="frame">{{user.u_phone}}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 50px;">
                    <div><p style="width: 66px; text-align: right;">警号:</p></div>
                    <div class="frame">{{ user.u_police_id }}</div>
                    <div><p style="width: 66px; text-align: right;">出生年月:</p></div>
                    <div class="frame">{{ user.u_birth }}</div>
                    <div><p style="width: 66px; text-align: right;">年龄:</p></div>
                    <div class="frame">{{ user.u_birth }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 50px;">
                    <div><p style="width: 66px; text-align: right;">邮箱:</p></div>
                    <div class="frame">{{ user.u_email }}</div>
                    <div><p style="width: 66px; text-align: right;">政治背景:</p></div>
                    <div class="frame">{{ user.u_politics }}</div>
                    <div><p style="width: 66px; text-align: right;">婚姻情况:</p></div>
                    <div class="frame">{{ user.u_wedding == 1 ? '已婚':'未婚' }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 50px;">
                    <div><p style="width: 66px; text-align: right;">班级:</p></div>
                    <div class="frame">{{ user.c_name }}</div>
                    <div><p style="width: 66px; text-align: right;">工作单位:</p></div>
                    <div class="frame">{{ user.office_name }}</div>
                    <div><p style="width: 66px; text-align: right;">职位:</p></div>
                    <div class="frame">{{ user.u_duty }} </div>
                </div>
            </div>
        </div>
        <div class="head-right">
            <div class="right_content">
                <div style>
                    <div class="Avatar">

                    </div>
                    <p style="margin-top: 30px;">考生123456</p>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
   components: {},
    data() {
        return {
            user:[]
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},
//方法集合
    methods: {
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.get('/user/detail').then(res=>{
            if(res.code == 200){
                this.user = res.data
                this.$message({
                    message: '获取成功',
                    type: 'suc',
                })
            }else{
                this.$message({
                    message: '登陆信息过期',
                    type: 'error',
                })
                this.$router.push('/Login')
            }
        })
    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.Avatar{
    width: 96px;
    height: 96px;
    background: #EEF2FF;
    border-radius: 50%;
}
.right_content{
    width: 100%;
    height: 320px;
    background: #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.head-right{
    width: calc(100% - 73%)
}
.left_bottom{
    padding:30px 30px;
}
.frame{
    width: 234px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #DAE0F2;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}
.left_content{
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #DCDFE6;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #3D3D3D;
    line-height: 25px;
    padding-left: 30px;
    display: flex;
    align-items: center;
}
.left_top{
    width: 100%;
    height: 142px;
    border-bottom: 1px solid #DCDFE6;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 34px;
    color: #2A5FD8;
    line-height: 32px;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 30px;
}
.head-left{
    width:calc(100% - 30%);
    height:100%;
    background: #FFFFFF;
    box-shadow: 0px 6px 10px 0px rgba(230,246,255,0.4);
    border-radius: 12px 12px 12px 12px;
}
.head{
    width:100%;
    height:95%;
    display: flex;
    justify-content: space-between;
}
</style>